<template>
  <div>
    <el-dialog 
      v-if="showDialog"
      :visible.sync="showDialog" 
      title="参数配置修改"
      class='dialog-container product-dialog' :before-close="handleClose">
      <el-form :model="dialogQuery" ref="dialogQuery"
            class="clearfix" label-width="200px" :rules="rules2">
            <el-form-item label="交易时间（小时）：" v-if="row.code==='minMaxHour'" required>
              <el-col :span="11">
                <el-form-item prop="minHour">
                  <el-input-number v-model="dialogQuery.minHour" :min="0" 
                  :max="24" size="medium" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align:center">
                ~
              </el-col>
              <el-col :span="11">
                <el-form-item prop="maxHour" >
                  <el-input-number v-model="dialogQuery.maxHour" :min="0" 
                  :max="24" size="medium" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="年龄区间：" v-if="row.code==='minMaxAge'" required>
              <el-col :span="11">
                <el-form-item prop="minAge">
                  <el-input-number v-model="dialogQuery.minAge" :min="0" 
                  :max="200" size="medium" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align:center">
                ~
              </el-col>
              <el-col :span="11">
                <el-form-item prop="maxAge" >
                  <el-input-number v-model="dialogQuery.maxAge" :min="0" 
                  :max="200" size="medium" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="反欺诈区间值：" v-if="row.code==='minMidMaxScore'">
              <el-col :span="7">
                <el-form-item prop="minScore">
                  <el-input-number v-model="dialogQuery.minScore" size="medium" :controls="false" style="width:100px" :min='0' :max="100"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align:center">
                ~
              </el-col>
              <el-col :span="7">
                <el-form-item prop="midScore">
                  <el-input-number v-model="dialogQuery.midScore" size="medium" :controls="false" style="width:100px" :min='0' :max="100"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align:center">
                ~
              </el-col>
              <el-col :span="7">
                <el-form-item prop="maxScore" >
                  <el-input-number v-model="dialogQuery.maxScore" size="medium" :controls="false" style="width:100px" :min='0' :max="100"></el-input-number>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="绑卡额度：" v-if="row.code==='minMidMaxLimitAmt'">
              <el-col :span="7">
                <el-form-item prop="minLimitAmt">
                  <el-input-number v-model="dialogQuery.minLimitAmt" size="medium" :controls="false" style="width:100px"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align:center">
                ~
              </el-col>
              <el-col :span="7">
                <el-form-item prop="midLimitAmt">
                  <el-input-number v-model="dialogQuery.midLimitAmt" size="medium" :controls="false" style="width:100px"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align:center">
                ~
              </el-col>
              <el-col :span="7">
                <el-form-item prop="maxLimitAmt">
                  <el-input-number v-model="dialogQuery.maxLimitAmt" size="medium" :controls="false" style="width:100px"></el-input-number>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="订单金额（元）：" v-if="row.code==='minMaxAmount'">
              <el-col :span="11">
                <el-form-item prop="minAmount" >
                  <el-input v-model="dialogQuery.minAmount" placeholder="最小值"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align:center">
                ~
              </el-col>
              <el-col :span="11">
                <el-form-item prop="maxAmount" >
                  <el-input v-model="dialogQuery.maxAmount" placeholder="最大值"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="绑卡额度随机数（元）：" v-if="row.code==='randomAmt'"  prop="randomAmt" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.randomAmt" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>

            <el-form-item label="通讯录最低数：" prop="addressCount"  v-if="row.code==='addressCount'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.addressCount" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>

            <el-form-item label="是否开放交易：" prop="isOpen" v-if="row.code==='isOpen'">
              <el-switch
                v-model="dialogQuery.isOpen"
                active-color="#13ce66"
                inactive-color="#999"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="子订单执行间隔时间：" prop="intervalTime" v-if="row.code==='intervalTime'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.intervalTime" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>

            <el-form-item label="子订单执行随机间隔时间：" prop="intervalRandomTime" v-if="row.code==='intervalRandomTime'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.intervalRandomTime" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>

            <el-form-item label="单日单卡交易次数：" prop="dayTime" v-if="row.code==='dayTime'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.dayTime" :max="999999"  :min="0" size="medium" style="width: 60%;"></el-input-number>
            </el-form-item>
            
            <el-form-item label="单月单卡交易次数：" prop="monthTimes" v-if="row.code==='monthTimes'"   :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.monthTimes" placeholder="单月单卡交易次数" :max="999999"  :min="0" size="medium" style="width: 60%;"></el-input-number>
            </el-form-item>
            
            <el-form-item label="自动补扣，第一次补扣比例：" prop="autoOneRate" v-if="row.code==='autoOneRate'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.autoOneRate" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>
            
            <el-form-item label="自动补扣，第二次补扣比例：" prop="autoTwoRate" v-if="row.code==='autoTwoRate'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.autoTwoRate" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>
            
            <el-form-item label="自动补扣，第三次补扣比例：" prop="autoThreeRate" v-if="row.code==='autoThreeRate'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.autoThreeRate" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>

            <el-form-item label="两笔费率（％）：" prop="rate2" v-if="row.code==='rate2'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.rate2" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label="两笔固定费用(元)：" prop="fixedFee2"  v-if="row.code==='fixedFee2'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.fixedFee2" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>
            
            <el-form-item label="三笔费率（％）：" prop="rate" v-if="row.code==='rate'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.rate" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label="三笔固定费用(元)：" prop="fixedFee"  v-if="row.code==='fixedFee'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.fixedFee" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>
            
            <el-form-item label="保证金比例（％）：" prop="bondRate"  v-if="row.code==='bondRate'" :rules="rules.numPot2">
              <el-input-number v-model="dialogQuery.bondRate" size="medium" :controls="false" style="width:200px"></el-input-number>
            </el-form-item>
            
            <el-form-item label="子订单交易结束时间（小时）：" prop="subOrderHour" v-if="row.code==='subOrderHour'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.subOrderHour" size="medium" style="width:200px" :max='24' ></el-input-number>
            </el-form-item>
            
            <el-form-item label="交易推迟时间（分）：" prop="delayTime" v-if="row.code==='delayTime'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.delayTime" size="medium" style="width:200px"></el-input-number>
            </el-form-item>

            <el-form-item label="两笔交易间隔时间：" prop="twoInterval" v-if="row.code==='twoInterval'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.twoInterval" size="medium" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label="三笔交易间隔时间：" prop="threeInterval" v-if="row.code==='threeInterval'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.threeInterval" size="medium" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label="随机间隔时间：" prop="randomtime" v-if="row.code==='randomtime'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.randomtime" size="medium" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label=" 交易超时后自动查询间隔时间：" prop="queryTime" v-if="row.code==='queryTime'" :rules="rules.InterNum">
              <el-input-number v-model="dialogQuery.queryTime" size="medium" style="width:200px"></el-input-number>
            </el-form-item>




            <div class="dialog-footer  pull-center">
              <el-button @click="cancle">取 消</el-button>
              <el-button type="primary" @click="submitForm('dialogQuery')" :disabled="disabled">确 定</el-button>
          </div>
      </el-form>
    </el-dialog>  
  </div>

</template>
<script>
import { cloneObj } from '@/utils/common'
import rules from '@/utils/rules'
import { updateConfig } from '@/api/parameter'
export default{
  data() {
    var s = () => {}
    var validateminHour = (rule, value, callback) => {
      const reg = /^\d+$/
      if (value === '') {
        callback(new Error('请输入最小值'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入整数'))
      } else {
        if (this.dialogQuery.maxHour !== '') {
          this.$refs.dialogQuery.validateField('maxHour')
        }
        callback()
      }
    }
    var validatemaxHour = (rule, value, callback) => {
      const reg = /^\d+$/
      if (value === '') {
        callback(new Error('请输入最大值'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入整数'))
      } else if (value < this.dialogQuery.minHour) {
        callback(new Error('请注意区间范围!'))
      } else {
        callback()
      }
    }
    var validateminAge = (rule, value, callback) => {
      const reg = /^\d+$/
      if (value === '') {
        callback(new Error('请输入最小值'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入整数'))
      } else {
        if (this.dialogQuery.maxAge !== '') {
          this.$refs.dialogQuery.validateField('maxAge')
        }
        callback()
      }
    }
    var validatemaxAge = (rule, value, callback) => {
      const reg = /^\d+$/
      if (value === '') {
        callback(new Error('请输入最大值'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入整数'))
      } else if (value < this.dialogQuery.minAge) {
        callback(new Error('请注意区间范围!'))
      } else {
        callback()
      }
    }
    var validateminAmount = (rule, value, callback) => {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (value === '') {
        callback(new Error('请输入最小值'))
      } else if (!reg.test(value)) {
        return callback(new Error('最多两位小数'))
      } else {
        if (this.dialogQuery.maxAmount !== '') {
          this.$refs.dialogQuery.validateField('maxAmount')
        }
        callback()
      }
    }
    var validatemaxAmount = (rule, value, callback) => {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (value === '') {
        callback(new Error('请输入最大值'))
      } else if (!reg.test(value)) {
        return callback(new Error('最多两位小数'))
      } else if (value < this.dialogQuery.minAmount) {
        callback(new Error('请注意区间范围!'))
      } else {
        callback()
      }
    }
    var validateminScore = (rule, value, callback) => {
      const reg = /^[0-9]*$/
      if (value === '') {
        callback(new Error('请输入最小值'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    var validatemidScore = (rule, value, callback) => {
      const reg = /^[0-9]*$/
      if (value === '') {
        callback(new Error('请输入最小值'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    var validatemaxScore = (rule, value, callback) => {
      const reg = /^[0-9]*$/
      if (value === '') {
        callback(new Error('请输入最大值'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    var validateminLimitAmt = (rule, value, callback) => {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (value === '') {
        callback(new Error('请输入最小值'))
      } else if (!reg.test(value)) {
        return callback(new Error('最多2位小数'))
      } else {
        callback()
      }
    }
    var validatemidLimitAmt = (rule, value, callback) => {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (value === '') {
        callback(new Error('请输入最小值'))
      } else if (!reg.test(value)) {
        return callback(new Error('最多2位小数'))
      } else {
        callback()
      }
    }
    var validatemaxLimitAmt = (rule, value, callback) => {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (value === '') {
        callback(new Error('请输入最大值'))
      } else if (!reg.test(value)) {
        return callback(new Error('最多2位小数'))
      } else {
        callback()
      }
    }

    return {
      dialogQuery: {
        minHour: '',
        maxHour: ''
      },
      disabled: false,
      baseArr: [],
      query: [],
      okFlag: true,
      show: true,
      rules,
      rules2: {
        minHour: [{ type: 'number', validator: validateminHour, required: true, trigger: 'blur' }],
        maxHour: [{ type: 'number', validator: validatemaxHour, required: true, trigger: 'blur' }],
        minAge: [{ type: 'number', validator: validateminAge, required: true, trigger: 'blur' }],
        maxAge: [{ type: 'number', validator: validatemaxAge, required: true, trigger: 'blur' }],
        minScore: [{ type: 'number', validator: validateminScore, trigger: 'blur', required: true }],
        midScore: [{ type: 'number', validator: validatemidScore, trigger: 'blur', required: true }],
        maxScore: [{ type: 'number', validator: validatemaxScore, trigger: 'blur', required: true }],
        minLimitAmt: [{ type: 'number', validator: validateminLimitAmt, trigger: 'blur', required: true }],
        midLimitAmt: [{ type: 'number', validator: validatemidLimitAmt, trigger: 'blur', required: true }],
        maxLimitAmt: [{ type: 'number', validator: validatemaxLimitAmt, trigger: 'blur', required: true }],
        minAmount: [{ type: 'number', validator: validateminAmount, required: true, trigger: 'blur' }],
        maxAmount: [{ type: 'number', validator: validatemaxAmount, required: true, trigger: 'blur' }]
      },
      showDialog: false
    }
  },
  props: {
    row: {
      type: Object
    }
  },
  created() {
    // this.handleData(this.row)
  },
  methods: {
    showDialogFn() {
      this.showDialog = true
    },
    handleData(row) {
      this.showDialog = true
      const baseArr = cloneObj(row.base)
      console.log('baseArr', baseArr)
      let query = cloneObj(row)
      if (baseArr.length === 1) {
        query = baseArr[0]
        if (query.code === 'randomAmt' || query.code === 'fixedFee' || query.code === 'fixedFee2') {
          query.value = parseFloat(query.value) * 100 / 10000
        }
        const code = query['code']
        const value = parseFloat(query['value'])
        query[code] = value
      } else if (row.code === 'minMaxHour') {
        query.minHour = parseFloat(row.value[0])
        query.maxHour = parseFloat(row.value[1])
      } else if (row.code === 'minMaxAge') {
        query.minAge = parseFloat(row.value[0])
        query.maxAge = parseFloat(row.value[1])
      } else if (row.code === 'minMidMaxScore') {
        query.minScore = parseFloat(row.value[0])
        query.midScore = parseFloat(row.value[1])
        query.maxScore = parseFloat(row.value[2])
      } else if (row.code === 'minMidMaxLimitAmt') {
        query.minLimitAmt = parseFloat(row.value[0])
        query.midLimitAmt = parseFloat(row.value[1])
        query.maxLimitAmt = parseFloat(row.value[2])
      } else if (row.code === 'minMaxAmount') {
        query.minAmount = parseFloat(row.value[0])
        query.maxAmount = parseFloat(row.value[1])
      }
      this.dialogQuery = cloneObj(query)
    },
    handleData2(row) {
      const query = []
      const rowData = cloneObj(row)
      this.query = this.dialogQuery.base
      console.log('rowData.code', rowData.code)
      if (rowData.code === 'minMaxHour') {
        console.log('minMaxHour')
        this.query[0].value = this.dialogQuery.minHour
        this.query[1].value = this.dialogQuery.maxHour
      } else if (rowData.code === 'minMaxAge') {
        this.query[0].value = this.dialogQuery.minAge
        this.query[1].value = this.dialogQuery.maxAge
      } else if (rowData.code === 'minMidMaxScore') {
        this.query[0].value = this.dialogQuery.minScore
        this.query[1].value = this.dialogQuery.midScore
        this.query[2].value = this.dialogQuery.maxScore
        if (this.dialogQuery.midScore < this.dialogQuery.minScore || this.dialogQuery.midScore > this.dialogQuery.maxScore) {
          this.$message.error('请填入正确的区间范围')
          this.okFlag = false
        } else {
          this.okFlag = true
        }
      } else if (rowData.code === 'minMidMaxLimitAmt') {
        this.query[0].value = this.dialogQuery.minLimitAmt * 100
        this.query[1].value = this.dialogQuery.midLimitAmt * 100
        this.query[2].value = this.dialogQuery.maxLimitAmt * 100
        if (this.dialogQuery.midLimitAmt < this.dialogQuery.minLimitAmt || this.dialogQuery.midLimitAmt > this.dialogQuery.maxLimitAmt) {
          this.$message.error('请填入正确的区间范围')
          this.okFlag = false
        } else {
          this.okFlag = true
        }
      } else if (rowData.code === 'minMaxAmount') {
        console.log('minMaxAmount')
        this.query[0].value = this.dialogQuery.minAmount * 100
        this.query[1].value = this.dialogQuery.maxAmount * 100
      } else {
        const code = rowData.code
        rowData.value = rowData[code]
        // 钱,两位小数,*100
        if (rowData.code === 'randomAmt' || rowData.code === 'fixedFee' || rowData.code === 'fixedFee2') {
          rowData.value = parseFloat(rowData.value) * 100
        }
        query.push(rowData)
        this.query = query
      }
    },
    // 关闭dialog
    handleClose(done) {
      done()
      // this.clearForm('dialogQuery')
      // this.resetForm('dialogQuery')
      console.log('清除检验结果')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    clearForm(formName) {
      this.$refs[formName].clearValidate()
    },
    // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
    submitForm(form) {
      console.log('this.dialogQuery111', this.dialogQuery)
      this.$refs[form].validate((valid) => {
        console.log('form', form)
        if (valid) {
          console.log('valid', valid)
          console.log('this.dialogQuery222', this.dialogQuery)
          this.handleData2(this.dialogQuery)
          console.log('this.dialogQuery333', this.dialogQuery)
          if (this.okFlag) {
            this.disabled = true
            updateConfig({}, this.query).then(res => {
              this.disabled = false
              this.showDialog = false
              this.$emit('listenToChildEvent', this.show)
              this.$message.success('更新成功')
            }).catch(error => {
              console.log('updateConfig error' + error)
            })
          } else {
            this.$message.error('请检查输入格式')
          }
        }
      })
    },
    cancle() {
      // this.show = false
      this.$emit('listenToChildEvent', this.show)
      this.showDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
.pull-center{
    text-align: center;
}
</style>

